<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>学习双向通信</title>
</head>

<body>
<div id="content">APP发送过来的数据9:</div>
<input id="messageInput" placeholder="输入信息后app即可展示" type="text">

<script>
    let contentDiv = document.getElementById("content")
    let messageInput = document.getElementById("messageInput")

    // 处理app发来的信息
    const appMessageHandle = event => {
      console.log("接收app信息");
      const message = event.data
      if (typeof message === 'string') {
        contentDiv.innerText = "APP发送过来的数据: " + message
      }
    }

    // 定义一个命名的事件处理函数
    function handleAppMount(event) {
      console.log("监听app那边的挂载事件html", event);
      appPort = event.ports[0];
      if (appPort) {
        console.log("挂载port");
        appPort.onmessage = appMessageHandle;

        // 创建输入事件处理程序
        function handleInput(event) {
          const inputValue = event.target.value;
          console.log("发送信息给APP " + inputValue);
          appPort.postMessage(inputValue);
        }

        // 添加输入事件监听器
        messageInput.addEventListener("input", handleInput);

        // 将输入事件处理程序存储在全局作用域，以便移除
        window.handleInput = handleInput; // 暴露到全局
      }
    }
    // 添加 message 事件监听器
    window.addEventListener('messagexcc', handleAppMount);

    // 当页面即将卸载时清理事件监听器
    window.addEventListener('beforeunload', function () {
      // 移除 message 事件监听器
      window.removeEventListener('messagexcc', handleAppMount);

      // 移除 input 事件监听器
      if (window.handleInput) {
        messageInput.removeEventListener("input", window.handleInput);
        delete window.handleInput; // 清除对命名函数的引用
      }
    });


</script>
</body>

</html>